<template>
	<view class="waterfall" v-if="posts.length > 0">
		<view class="waterfall-column">
			<view 
				class="post-item" 
				v-for="(post, index) in leftPosts" 
				:key="post.id"
				@tap="goToDetail(post.id)"
			>
				<image 
					v-if="post.cover" 
					class="cover-image" 
					:src="api.BASE_URL + post.cover" 
					mode="widthFix"
				></image>
				<view class="post-content">
					<text class="title">{{ post.title }}</text>
					<text class="content">{{ post.content.length > 30 ? post.content.slice(0, 30) + '...' : post.content }}</text>
					<view class="post-footer">
						<view class="user-info">
							<image class="avatar" :src="api.BASE_URL + post.user.avatar" mode="aspectFill"></image>
							<text class="username">{{ post.user.username }}</text>
						</view>
						<view class="likes">
							<text class="iconfont icon-icon"></text>
							<text>{{ post.likes }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="waterfall-column">
			<view 
				class="post-item" 
				v-for="(post, index) in rightPosts" 
				:key="post.id"
				@tap="goToDetail(post.id)"
			>
				<image 
					v-if="post.cover" 
					class="cover-image" 
					:src="api.BASE_URL + post.cover" 
					mode="widthFix"
				></image>
				<view class="post-content">
					<text class="title">{{ post.title }}</text>
					<text class="content">{{ post.content.length > 30 ? post.content.slice(0, 30) + '...' : post.content }}</text>
					<view class="post-footer">
						<view class="user-info">
							<image class="avatar" :src="api.BASE_URL + post.user.avatar" mode="aspectFill"></image>
							<text class="username">{{ post.user.username }}</text>
						</view>
						<view class="likes">
							<text class="iconfont icon-icon"></text>
							<text>{{ post.likes }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	
	<!-- 无数据时显示空状态 -->
	<view class="empty-state" v-else>
		<text class="iconfont icon-empty"></text>
		<text class="empty-text">暂时还没有帖子哦~</text>
	</view>
</template>

<script setup>
import { computed } from 'vue'
import { api } from '@/utils/request'

const props = defineProps({
	posts: {
		type: Array,
		default: () => []
	}
})

// 计算左右两列的帖子
const leftPosts = computed(() => {
	return props.posts.filter((_, index) => index % 2 === 0)
})

const rightPosts = computed(() => {
	return props.posts.filter((_, index) => index % 2 === 1)
})

// 跳转到详情页
const goToDetail = (id) => {
	uni.navigateTo({
		url: `/pages/post/detail?post_id=${id}`
	})
}
</script>

<style lang="scss" scoped>
.waterfall {
	display: flex;
	gap: 20rpx;
	width: 100%;
	box-sizing: border-box;
	
	.waterfall-column {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		min-width: 0;
	}
}

.post-item {
	width: 100%;
	box-sizing: border-box;
	background: #fff;
	border-radius: 12rpx;
	overflow: hidden;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
	
	.cover-image {
		width: 100%;
		border-radius: 12rpx 12rpx 0 0;
	}
	
	.post-content {
		padding: 20rpx;
		width: 100%;
		box-sizing: border-box;
		
		.title {
			font-size: 28rpx;
			color: #333;
			font-weight: bold;
			margin-bottom: 12rpx;
			display: block;
			word-break: break-all;
		}
		
		.content {
			font-size: 24rpx;
			color: #666;
			line-height: 1.4;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			text-overflow: ellipsis;
			word-break: break-all;
		}
	}
	
	.post-footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 16rpx;
		width: 100%;
		box-sizing: border-box;
		
		.user-info {
			display: flex;
			align-items: center;
			gap: 8rpx;
			flex: 1;
			min-width: 0;
			
			.avatar {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				flex-shrink: 0;
			}
			
			.username {
				font-size: 24rpx;
				color: #666;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
		
		.likes {
			display: flex;
			align-items: center;
			gap: 4rpx;
			font-size: 24rpx;
			color: #999;
			
			.icon-icon {
				color: #ff6b6b;
			}
		}
	}
	
	&:active {
		transform: scale(0.98);
		opacity: 0.9;
	}
}

// 添加空状态样式
.empty-state {
	width: 100%;
	height: 400rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20rpx;
	
	.icon-empty {
		font-size: 80rpx;
		color: #ddd;
	}
	
	.empty-text {
		font-size: 28rpx;
		color: #999;
	}
}
</style> 